<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Slideshow - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/slideshow.js"></script>
        <script src="../../src/js/components/slideshow-fx.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Slideshow</h1>

            <h2>Controls</h2>

            <div class="uk-grid" data-uk-margin>
                <div class="uk-width-medium-1-3">

                    <ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
                        <li><img src="http://unsplash.it/600/200" width="600" height="200" alt=""></li>
                        <li><img src="http://unsplash.it/600/300" width="600" height="300" alt=""></li>
                        <li><img src="http://unsplash.it/600/400" width="600" height="400" alt=""></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-3">

                    <div data-uk-slideshow>
                        <div class="uk-slidenav-position uk-margin">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                        </div>
                        <ul class="uk-dotnav uk-flex-center">
                            <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                            <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                            <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                        </ul>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <div data-uk-slideshow>
                        <ul class="uk-slideshow">
                            <li><img src="http://unsplash.it/600/400" alt=""></li>
                            <li><img src="http://unsplash.it/600/401" alt=""></li>
                            <li><img src="http://unsplash.it/600/402" alt=""></li>
                        </ul>
                        <ul class="uk-grid uk-grid-width-1-3">
                            <li><a data-uk-slideshow-item="0"><img src="http://unsplash.it/600/400"></a></li>
                            <li><a data-uk-slideshow-item="1"><img src="http://unsplash.it/600/401"></a></li>
                            <li><a data-uk-slideshow-item="2"><img src="http://unsplash.it/600/402"></a></li>
                        </ul>
                    </div>

                </div>
            </div>

            <h2>Content</h2>

            <div class="uk-grid">
                <div class="uk-width-medium-1-3">

                    <div class="uk-slidenav-position" data-uk-slideshow>
                        <ul class="uk-slideshow">
                            <li>
                                <div><img src="http://placehold.it/600x200&amp;text=nocover"></div>
                            </li>
                            <li><img src="http://placehold.it/600x300&amp;text=cover"></li>
                            <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
                        </ul>
                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <div class="uk-slidenav-position" data-uk-slideshow>
                        <ul class="uk-slideshow">
                            <li>
                                <div class="uk-text-center">
                                    <h1>Headline</h1>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                                    <button class="uk-button">Read more</button>
                                </div>
                            </li>
                            <li>
                                <div class="uk-text-center">
                                    <h1>Headline</h1>
                                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                    <button class="uk-button">Read more</button>
                                </div>
                            </li>
                            <li>
                                <div><img src="http://placehold.it/600x200&amp;text=nocover"></div>
                            </li>
                        </ul>
                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                        <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <div data-uk-slideshow>
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li>
                                    <video width="600" height="400" autoplay loop muted controls>
                                        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                                        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test1" type="video/ogg">
                                    </video>
                                </li>
                                <li>
                                    <iframe src="http://player.vimeo.com/video/1084537?autoplay=1&amp;loop=1&amp;badge=0&amp;byline=0&amp;portrait=0&amp;title=0" width="500" height="281" frameborder="0" allowfullscreen></iframe>
                                </li>
                                <li>
                                    <iframe src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen></iframe>
                                </li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Overlays</h2>

            <div class="uk-margin" data-uk-slideshow>
                <div class="uk-slidenav-position">
                    <ul class="uk-slideshow uk-overlay-active">
                        <li>
                            <img src="http://unsplash.it/1000/500" alt="">
                            <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
                                <div>
                                    <h3>Overlay</h3>
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr,<br>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <img src="http://unsplash.it/1000/502" alt="">
                            <div class="uk-overlay-panel uk-overlay-top uk-overlay-background uk-overlay-slide-top">
                                <h3>Overlay Top</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                <button class="uk-button uk-button-primary">Button</button>
                            </div>
                        </li>
                        <li>
                            <img src="http://unsplash.it/1000/503" alt="">
                            <div class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-overlay-slide-bottom">
                                <h3>Overlay Bottom</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                <button class="uk-button uk-button-primary">Button</button>
                            </div>
                        </li>
                        <li>
                            <img src="http://unsplash.it/1000/504" alt="">
                            <div class="uk-overlay-panel uk-overlay-left uk-overlay-background uk-overlay-slide-left uk-width-1-4">
                                <h3>Overlay Left</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                <button class="uk-button uk-button-primary">Button</button>
                            </div>
                        </li>
                        <li>
                            <img src="http://unsplash.it/1000/505" alt="">
                            <div class="uk-overlay-panel uk-overlay-right uk-overlay-background uk-overlay-slide-right uk-width-1-4">
                                <h3>Overlay Right</h3>
                                <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
                                <button class="uk-button uk-button-primary">Button</button>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                    <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                </div>
            </div>

            <h2>Animations</h2>

            <div class="uk-grid" data-uk-margin>
                <div class="uk-width-medium-1-3">

                    <h3>None</h3>

                    <div data-uk-slideshow="{animation: 'none'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Fade and Kenburns</h3>

                    <div data-uk-slideshow="{kenburns:true,autoplay:true}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Fade and Kenburns custom</h3>

                    <div data-uk-slideshow="{kenburns:true,autoplay:true,kenburnsanimations:'uk-animation-middle-left,uk-animation-middle-right'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Scroll</h3>

                    <div data-uk-slideshow="{animation: 'scroll'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Scale</h3>

                    <div data-uk-slideshow="{animation: 'scale'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Swipe</h3>

                    <div data-uk-slideshow="{animation: 'swipe'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Slice Down</h3>

                    <div data-uk-slideshow="{animation: 'slice-down'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Slice Up</h3>

                    <div data-uk-slideshow="{animation: 'slice-up'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Slice Up Down</h3>

                    <div data-uk-slideshow="{animation: 'slice-up-down'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Fold</h3>

                    <div data-uk-slideshow="{animation: 'fold'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Puzzle</h3>

                    <div data-uk-slideshow="{animation: 'puzzle'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Boxes</h3>

                    <div data-uk-slideshow="{animation: 'boxes'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="uk-width-medium-1-3">

                    <h3>Boxes-reverse</h3>

                    <div data-uk-slideshow="{animation: 'boxes-reverse'}">
                        <div class="uk-slidenav-position">
                            <ul class="uk-slideshow">
                                <li><img src="http://unsplash.it/600/200" alt=""></li>
                                <li><img src="http://unsplash.it/600/300" alt=""></li>
                                <li><img src="http://unsplash.it/600/400" alt=""></li>
                            </ul>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                            <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                            <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                                <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                                <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                                <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>

            <h2>Fullscreen</h2>

        </div>

        <div data-uk-slideshow="{kenburns:true}">
            <div class="uk-slidenav-position">
                <ul class="uk-slideshow uk-slideshow-fullscreen">
                    <li><img src="http://unsplash.it/1600/1200" alt=""></li>
                    <li><img src="http://unsplash.it/1600/1300" alt=""></li>
                    <li><img src="http://unsplash.it/1600/1400" alt=""></li>
                </ul>
                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                    <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                    <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                    <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>

        <div data-uk-slideshow="{animation: 'random-fx'}">
            <div class="uk-slidenav-position">
                <ul class="uk-slideshow uk-slideshow-fullscreen">
                    <li><img src="http://unsplash.it/1600/1200" alt=""></li>
                    <li><img src="http://unsplash.it/1600/1300" alt=""></li>
                    <li><img src="http://unsplash.it/1600/1400" alt=""></li>
                </ul>
                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
                <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
                <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
                    <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
                    <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
                    <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
                </ul>
            </div>
        </div>

    </body>
</html>
